<template>
	<div class="match-detail" style="position: fixed;top: 1.7rem !important;width: 100%;height: 100%;">
		<header-com :title="title" moduleName="match"></header-com>
		<!-- <tabs class="tabs" v-model="activeTab" :tabList="tabList" :activeTab="activeTab" :status="status"></tabs> -->
		<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
			<match-end-search :groups="slide" v-on:childByValue="childByValue"></match-end-search>
			<matchBattle class="battle" :matchs="battleList"></matchBattle>
		</scroller>
		<div v-if="battleList.length > 5" class="fixed" @click="scroll">
			<van-icon name="upgrade" />
		</div>
	</div>
</template>
<script>
	import {
		Icon
	} from 'vant';
	import teamTabs from "./components/teamTabs";
	import roundSwiper from "./components/roundSwiper";
	import matchBattle from "../../../components/match/matchBattle";
	import matchEndSearch from "./components/matchEndSearch";
	import roundNumber from "./components/roundNumber";
	import roundForm from "./components/roundForm";
	export default {
		components: {
			// tabs,
			teamTabs,
			roundSwiper,
			matchBattle,
			matchEndSearch,
			roundNumber,
			roundForm
		},
		data() {
			return {
				activeTab: 2,
				com_id: localStorage.getItem("index"),
				battleList: [],
				signForm: [],
				websock: null,
				group: "",
				name: "",
				match_date: "",
				slide: [], //模拟
				roundList: [],
				group_list: [],
				keys: [],
				title: this.$route.query.name,
				roundNum: 0,
				type: null,
				form: [],
				indexs: '',
				loop: [],
				num: 0,
				shows: true,
				formshow: true,
				tabList: ["进行中", "已结束", "未开始", "签表"],
				status: [2, 3, 0, 100],
				offset: 0,
				noDate: false,
				ongoingpage: 0,
				ws: null
			};
		},
		mounted() {
			this.$store.commit('SET_MSG', this.$route.query.id)
			this.match_list()
			this.com_id = localStorage.getItem("index")
		},
		methods: {
			no_ongoing_match() {
				var params = new URLSearchParams();
				params.append("com_id", this.com_id);
				params.append("status", 0);
				params.append("group_id", this.group);
				params.append("match_date", this.match_date);
				params.append("search", this.name);
				params.append("page", this.offset);
				params.append("open_id",  window.localStorage.getItem("openid"));
				this.$axios
					.post("/mobile/matching/no_ongoing_match", params)
					.then(data => {
						if (data.data.code == 2000) {
							if (this.offset == 1) {
								this.battleList = data.data.data //如果是想下滑动，刷新数据 就让items等于最新数据
							} else {
								this.battleList = this.battleList.concat(data.data.data) //否则就把数据拼接
							}
							if (data.data.data.length < 10) { //每次请求数据是10条，如果数据不够10条，就是没数据了 让页数=0；
								// this.offset = 0
								//               fn(true)
								this.noDate = true
							} else {
								// if (fn) fn()
							}
						} else {
							return false;
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			infinite: function(done) {
				if (this.noDate) {
					this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
				} else {
					setTimeout(() => {
						this.offset++; //下拉一次页数+1
						this.no_ongoing_match(done);
						done(); //进行下一次加载操作
					}, 500);
				}
			},
			refresh: function(done) {
				this.offset = 1
				this.noDate = false;
				setTimeout(function() {
					this.no_ongoing_match(done);
					this.$refs.myscroller.finishPullToRefresh(); //停止下拉刷新动效
				}.bind(this), 300)
			},
			match_list() {
				var params = new URLSearchParams();
				params.append("com_id", localStorage.getItem("index"));
				this.$axios
					.post("/mobile/matching/search_list", params)
					.then(res => {
						if ((res.data.code = 2000)) {
							// console.log(res.data.data.group);
							this.slide = res.data.data.group;
							this.type = this.slide[0].com_system; //默认
							this.group = this.slide[0].group_id; //默认group_id
							if (res.data.data.now_time) {
								this.match_date = res.data.data.now_time
							}
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			childByValue(childValue) {
				console.log(childValue)
				this.offset = 1
				this.group = childValue.group_id;
				this.name = childValue.name;
				this.match_date = childValue.match_date;
				// this.initWebSocket();
				// this.no_ongoing_match()
				this.offset = 0
				this.refresh()
			},
			scroll() {
				let scroller = this.$refs.myscroller
				scroller.scrollTo(0, 0, true)
			}
		}
	};
</script>
<style scoped>
	.fixed{
		position: fixed;
		bottom: 50px;
		right: 10px;
		width: 30px;
		height: 30px;
		font-size: 26px;
	}
	.match-detail {
		margin-bottom: 1.1rem;
	}

	.tabs {
		position: fixed;
		top: 45px;
		z-index: 9999;
		width: 100%;
	}
</style>
